<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">设置按钮</div>
        <div class="content">
          <el-form-item label="图标">
            <div class="sa-flex">
              <sa-uploader v-model="settingData.data.src" fileType="image"></sa-uploader>
            </div>
          </el-form-item>
		  <el-form-item label="标题">
            <el-input v-model="settingData.data.title"></el-input>
          </el-form-item>
          <el-form-item label="链接">
            <dc-url v-model="settingData.data.url"></dc-url>
          </el-form-item>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup>
  import { watch } from 'vue';
  import { useModal } from '@/sheep/hooks';
  import Edit from './edit.vue';
  import dcUrl from '../../common/dc-url.vue';

  const props = defineProps(['settingData', 'tabType']);

  watch(
    () => props.settingData.data.src,
    () => {
      props.settingData.data.list = [];
    },
  );

  function onSetHotzone() {
    useModal(
      Edit,
      { title: '设置热区', data: props.settingData.data },
      {
        confirm: (res) => {
          props.settingData.data.list = res.data;
        },
      },
    );
  }
</script>
